<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    /*清除默认样式*/
    * {
      margin: 0;
      padding: 0;
    }

    #first {
      width: 500px;
      height: 500px;
      background-color: cadetblue;
      overflow: hidden;
      /*display: flex;*/
      /*justify-content:center;*/
      /*align-items:center;*/
    }

    #second {
      width: 300px;
      height: 300px;
      background-color: greenyellow;
      overflow: hidden;
      margin: 100px auto 0 auto;
      /*margin-top: 100px;*/
    }
  </style>
</head>
<body>

<div id="app">
  <!--  <div id="num" style="display: inline-block;">{{num}}</div>-->
  <!--  <input type="text" v-model:value="username" v-on:blur="tip"></input>-->
  <!--  <input type="button" value="点击加一" @click="add"></input>-->
  <!--  <div id="first">-->
  <!--    <div id="second">-->
  <!--      <a href="https://www.baidu.com" @click="tip">lalala</a>-->
  <!--    </div>-->
  <!--  </div>-->
  <input type="text" placeholder="姓" v-model:value="lastName"></input>
  <br/>
  <input type="text" placeholder="名" v-model:value="firstName"></input>
  <br/>
  <span>{{ name }}</span>
</div>

<script src="./vue.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        num: 0,
        lastName: undefined,
        firstName: undefined,
        username: '张三'
      }
    },
    computed: {
      name() {
        if (this.lastName && this.firstName) {
          return this.lastName + "" + this.firstName
        }
        return '滚'
      }
    },
    methods: {
      add() {
        this.num++
      },
      tip() {
        alert('lalala')
      },
      firstTip() {
        alert('lalala 1')
      },
      secondTip() {
        alert('lalala 2')
      }
    },
    beforeCreate() {
    },
    created() {

    },
    mounted() {
    },
    destroyed() {
    }
  })
</script>

</body>
</html>
